<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全日期Demo</title>
    <link rel="stylesheet" type="text/css" href="../js/fullcalendar/fullcalendar.min.css">
    <link rel="stylesheet" type="text/css" href="../js/fullcalendar/fullcalendar.print.min.css" media='print'>
    <link rel="stylesheet" type="text/css" href="../js/easyUI/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../js/easyUI/themes/default/easyui.css">
    <script type="text/javascript" src="../js/moment.min.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/fullcalendar/fullcalendar.min.js"></script>
    <script type="text/javascript" src="../js/fullcalendar/locale-all.js"></script>
    <script type="text/javascript" src="../js/easyUI/jquery.easyui.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#eventTitle').val('');$('#eventContent').val('');
        $('#event-dialog').dialog({

            title: '事件提示框',
            width: 400,
            height: 200,
            closed: true,
            cache: false,
            modal: true,
            buttons:[{
                text:'保存',
                handler:function(){
                    var eventData = {
                        title: $('#eventTitle').val(),
                        start: $('#eventStart').datetimebox('getValue'),
                        end: $('#eventEnd').datetimebox('getValue'),
                        content:$('#eventContent').val()
                    };
                    $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
                    $('#calendar').fullCalendar('unselect');
                    $.post("/htq-oa/event/save",eventData,function(data){
                    });
                }
            },{
                text:'取消',
                handler:function(){

                }
            }]
        });
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            locale:'zh-cn',
            defaultDate: '2016-12-12',
            navLinks: true, // can click day/week names to navigate views
            selectable: true,
           // selectHelper: true,
            select: function(start, end){
            $('#event-dialog').dialog("open");

            },
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events:'/htq-oa/event/list'
        })
        $('#calendar').fullCalendar('option','timezone','local');
    })
</script>


    <style>
        body {
            margin: 40px 10px;
            padding: 0;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif,"宋体";
            font-size: 14px;
        }
        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }

    </style>
</head>
<body>
<div id='calendar'></div>
<div id="event-dialog">
    事件标题：<input id="eventTitle" type="text" name="event.title"><br>
    事件内容：<textarea id="eventContent" name="event.content"></textarea><br>
    开始时间：<input id="eventStart" name="event.startTime" class="easyui-datetimebox" data-options="required:true"><br>
    结束时间：<input id="eventEnd" name="event.endTime" class="easyui-datetimebox" data-options="required:true"><br>
</div>
</body>
</html>